<template>
	<view class="">
		<view class="fault_list" v-if="faultList.length>0">
			<view class="coll_li" v-for="(item,index) in faultList" :key="index" @click="getFaultItem(item)">
				<view class="text_name">
					<span>{{item.name}}</span><span class="red_num" v-if="getTypeNum(item)">{{getTypeNum(item)}}</span>
				</view>
				<uni-icons type="right"></uni-icons>
			</view>

		</view>
		<view v-else class="void_goods">
			<image class="img" src="/static/goods.svg"></image>
			<view class="tip">暂无故障类型</view>
		</view>
		<!-- <view class="btn_word">
			<button type="primary" class="btn_bor" @click="onConfirm">确认</button>
		</view> -->
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad,onUnload
	} from '@dcloudio/uni-app'
	import { onReachBottom } from '@dcloudio/uni-app'
	import store from '@/store/index.js'
	import apiFault from '@/util/api/fault.js'
	const faultList = ref([])//列表
	const totle = ref(0)//总条数
	const page = ref(1)
	const valueIdCode=ref()
	onLoad((e) => {
		valueIdCode.value=e.value
		getMobileFaultList()
	})
	onUnload(()=>{
		uni.hideLoading()
	})
	// 获取列表
	const getMobileFaultList = async () => {
		let data = {
			"limit": 50,
			"page": page.value
		}
		await apiFault.getUserMobileFaultList(data).then(res => {
			if (res.code == 20000) {
				totle.value = res.data.total
				faultList.value = [...faultList.value, ...res.data.rows]
			}
		})
	}
	const getFaultItem = (item) => {
		store.commit('setchackFaultItem', item)
		uni.navigateTo({
			url: '/pages/home/fault/fault?id=' + item.id+'&value='+valueIdCode.value
		})
	}
	//获取已经选择的类型数量
	const getTypeNum = (item) => {
		for (let i of store.state.checkedFaultList) {
			if (item.id == i.typeId) {
				return i.list.length
			}
		}
	}
	
	//加载更多
	onReachBottom(() => {
		if (totle.value > faultList.value.length) {
			page.value += 1
			getMobileFaultList()
		}
	})
</script>

<style lang="scss" scoped>
	.void_goods {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 60vh;
	
		.img {
			width: 60%;
			height: 250rpx;
		}
	
		.tip {
			color: #aaa;
			font-size: 28rpx;
		}
	}
	.fault_list {
		background-color: #f6f7fa;
		height: calc(100vh - 80rpx);
		padding: 40rpx 40rpx;

		.coll_li {
			padding: 40rpx 20rpx;
			overflow: hidden;
			border-radius: 4rpx;
			background-color: #fff;
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.text_name {
				position: relative;

				.red_num {
					background-color: #FF5733;
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					position: absolute;
					text-align: center;
					border-radius: 50%;
					color: #fff;
					top: -10rpx;
					margin-left: 10rpx;
					font-size: 22rpx;
					transform: scale(.9);
				}
			}

		}
	}

	.btn_word {
		padding: 50rpx 40rpx;
		position: fixed;
		bottom: 20rpx;
		left: 0;
		right: 0;
		z-index: 2;

		:deep(button:after) {
			border: none !important;
		}

		.btn_bor {
			font-size: 32rpx;
			border-radius: 50rpx;
			background-color: #007cff;
		}
	}
</style>